<template>
    <div class="bgwrap">
        <div class="m-login">
            <div>
                <h3>登录</h3>
                <form action="#">
                    <mu-text-field hintText="用户名" v-model="username" />
                    <mu-text-field hintText="密码" v-model="password" />
                    <div class="checkbox-wrap">
                        <mu-raised-button label="登录" class="demo-raised-button" @click="login" primary />
                    </div>
                </form>
            </div>
        </div>
        <mu-snackbar v-if="snackbar" :message="snackbarMsg" action="关闭" @actionClick="hideSnackbar" @close="hideSnackbar" />
    </div>
</template>

<script>

import API from '../api/api'
export default {
    name: 'loginForm',
    data() {
        return {
            snackbar: false,
            snackbarMsg: '',
            username: '',
            password: ''
        }
    },
    computed: {

    },
    methods: {
        showSnackbar() {
            this.snackbar = true
            if (this.snackTimer) clearTimeout(this.snackTimer)
            this.snackTimer = setTimeout(() => { this.snackbar = false }, 3000)
        },
        hideSnackbar() {
            this.snackbar = false
            if (this.snackTimer) clearTimeout(this.snackTimer)
        },
        login: function() {
            API.login(this.username, this.password)
                .then(function(res) {
                    console.log(res)
                    this.snackbarMsg = '登陆成功,正在为您跳转';
                    this.showSnackbar();
                    setTimeout(function() {
                        this.$router.push({
                            name: 'Admin'
                        })
                    }.bind(this),2000)
                }.bind(this), function(err) {
                    this.snackbarMsg = '用户名或密码错误';
                    this.showSnackbar();
                }.bind(this))
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
    color: #fff;
}

.mu-snackbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: inherit;
    bottom: 40px;
}

.bgwrap {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../assets/images/login_bg.jpg');
    display: flex;
    justify-content: center;
    align-items: center;
}

.mu-text-field {
    width: 300px;
}

.mu-linear-progress {
    position: absolute;
    top: 0;
}

.m-login {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    box-sizing: border-box;
    padding: 20px 0;
    width: 400px;
    height: 400px;
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
}

.checkbox-wrap {
    position: relative;
    box-shadow: none;
    width: 300px;
    margin: 0 auto;
}

.checkbox-wrap ::after {
    content: "";
    display: block;
    height: 0px;
    visibility: hidden;
    clear: both;
}

label {
    width: 30%;
    float: left;
    text-align: left;
}

.tip {
    width: 70%;
    float: right;
    padding: 4px 0;
    text-align: right;
}

.button-wrap {
    width: 300px;
    margin: 0 auto;
    text-align: right;
    margin-top: 30px;
}
</style>
